/*
 * @Description: 点击节点展示的右键菜单
 * @Author: Rfan
 * @Date: 2022-02-18 16:23:01
 * @LastEditTime: 2022-07-08 14:10:31
 */

import { useRef } from 'react';
import { Item, Menu, Separator } from 'react-contexify';
import type { ItemParams } from 'react-contexify';
import {
  ADD_DATA_NODE_SAME_LEVEL,
  ADD_DESC_NODE_SAME_LEVEL,
  ADD_GROUP_NODE_SAME_LEVEL,
  ARCHIVE_MGT,
  DELETE,
  EDIT,
  MENU_ID,
  MOVE_DOWN,
  MOVE_UP,
  QUICK_ARCHIVE_NODE,
  RENAME
} from '../constants';
import ContextDialogs, { DialogsName } from './ContextDialogs';
import { useFolderTreeContext } from '../contexts/FolderTreeContext';
import { findTreeNodeByKey } from '@/utils';

const NodeContextMenu = (nodeType: any) => {
  const { treeData, deleteTreeNode, nodeTypeConst } = useFolderTreeContext();
  const dialogsRef = useRef<any>();

  const isFirstChild = (id: number, pid: number) => {
    const parentNode: any = findTreeNodeByKey(treeData, pid);
    if (parentNode) {
      return parentNode.children[0].id === id;
    }
    return false;
  };
  const isLastChild = (id: number, pid: number) => {
    const parentNode: any = findTreeNodeByKey(treeData, pid);
    if (parentNode) {
      return parentNode.children[parentNode.children.length - 1].id === id;
    }
    return false;
  };

  /**
   * @description: 判断右键菜单项目是否disable
   * @param {ItemParams} param1 条目相关数据
   * @return {boolean} 是否disable的状态
   */
  const itemDisabled = ({ props, data }: ItemParams): boolean => {
    switch (data.type) {
      case MOVE_UP: {
        return isFirstChild(props.id, props.pid);
      }
      case MOVE_DOWN: {
        return isLastChild(props.id, props.pid);
      }
      default:
        return false;
    }
  };

  /**
   * @description: 判断右键菜单项目是否隐藏
   * @param {ItemParams} param1 条目相关数据
   * @return {boolean} 是否隐藏的状态
   */
  const itemHidden = ({ props, data }: ItemParams): boolean => {
    // console.log('itemHidden', { triggerEvent, props, data, nodeType });

    switch (data.type) {
      // 上移
      case MOVE_UP: {
        return [1, 2, 3].indexOf(props.nodeType) >= 0;
      }

      // 下移
      case MOVE_DOWN: {
        return [1, 2, 3].indexOf(props.nodeType) >= 0;
      }

      // 删除
      case DELETE: {
        return [1, 2].indexOf(props.nodeType) >= 0;
      }

      // 修改
      case EDIT: {
        return [1, 2, 3].indexOf(props.nodeType) >= 0;
      }

      // 重命名
      case RENAME: {
        return [1, 2, 3].indexOf(props.nodeType) >= 0;
      }
      default:
        return false;
    }
  };

  const handleItemClick = ({ event, props, data, triggerEvent }: ItemParams) => {
    // ⚠️ data and triggerEvent are not used. I've just added them so we have the full list of parameters

    // I use the id attribute defined on the `Item` to identify which one is it
    // this feel natural to my brain
    console.log('onContextMenu item', { event, props, data, triggerEvent });
    dialogsRef.current.showDialogFunc(data.name, data.openType, props);
  };

  const deleteNode = ({ props }: ItemParams) => {
    deleteTreeNode(props.id);
  };

  const editNode = ({ props }: ItemParams) => {
    switch (props.nodeType) {
      // 数据节点
      case nodeTypeConst().DATA: {
        dialogsRef.current.showDialogFunc(DialogsName.EDIT_DATA, 1, props);
        break;
      }

      // 描述节点
      case nodeTypeConst().DESC: {
        dialogsRef.current.showDialogFunc(DialogsName.EDIT_DESC, 1, props);
        break;
      }

      // 分组节点
      case nodeTypeConst().GROUP: {
        dialogsRef.current.showDialogFunc(DialogsName.EDIT_GROUP, 1, props);
        break;
      }
      default:
        break;
    }
  };

  return (
    <>
      <Menu id={MENU_ID}>
        <Item
          data={{ type: ARCHIVE_MGT, name: DialogsName.ARCHIVE_MGT, openType: 1 }}
          disabled={true}
          onClick={handleItemClick}
        >
          档案节点管理
        </Item>
        <Item data={{ type: QUICK_ARCHIVE_NODE }} disabled={true}>
          快捷生成档案节点
        </Item>
        <Separator />

        {/* <Item
          data={{ type: ADD_DATA_NODE_SUB_LEVEL }}
          disabled={itemDisabled}
          hidden={itemHidden}
          onClick={handleItemClick}
        >
          添加数据节点（同级）
        </Item> */}
        <Item
          data={{ type: ADD_DATA_NODE_SAME_LEVEL, name: DialogsName.CREATE_DATA, openType: 1 }}
          disabled={itemDisabled}
          hidden={itemHidden}
          onClick={handleItemClick}
        >
          添加数据节点（子级）
        </Item>

        {/* <Item
          data={{ type: ADD_DESC_NODE_SUB_LEVEL }}
          disabled={itemDisabled}
          hidden={itemHidden}
          onClick={handleItemClick}
        >
          添加描述节点（同级）
        </Item> */}
        <Item
          data={{ type: ADD_DESC_NODE_SAME_LEVEL, name: DialogsName.CREATE_DESC, openType: 1 }}
          disabled={itemDisabled}
          hidden={itemHidden}
          onClick={handleItemClick}
        >
          添加描述节点（子级）
        </Item>

        {/* <Item
          data={{ type: ADD_GROUP_NODE_SUB_LEVEL }}
          disabled={itemDisabled}
          hidden={itemHidden}
          onClick={handleItemClick}
        >
          添加分组节点（同级）
        </Item> */}
        <Item
          data={{ type: ADD_GROUP_NODE_SAME_LEVEL, name: DialogsName.CREATE_GROUP, openType: 1 }}
          disabled={itemDisabled}
          hidden={itemHidden}
          onClick={handleItemClick}
        >
          添加分组节点（子级）
        </Item>
        <Separator />

        <Item
          data={{ type: MOVE_UP }}
          disabled={itemDisabled}
          hidden={itemHidden}
          onClick={handleItemClick}
        >
          上移（同级）
        </Item>
        <Item
          data={{ type: MOVE_DOWN }}
          disabled={itemDisabled}
          hidden={itemHidden}
          onClick={handleItemClick}
        >
          下移（同级）
        </Item>
        <Separator />

        <Item data={{ type: DELETE }} hidden={itemHidden} onClick={deleteNode}>
          删除
        </Item>
        <Item data={{ type: EDIT }} hidden={itemHidden} onClick={editNode}>
          修改
        </Item>
        {/* <Item data={{ type: CHECK }} disabled={itemDisabled} onClick={handleItemClick}>
          查看
        </Item> */}
        {/* <Item data={{ type: DELETE_NULL }} disabled onClick={handleItemClick}> */}
        {/*  删除空节点 */}
        {/* </Item> */}
        <Item
          data={{ type: RENAME }}
          hidden={itemHidden}
          onClick={({ props }) => {
            dialogsRef.current.showDialogFunc(DialogsName.RENAME, 1, props);
          }}
        >
          重命名
        </Item>
      </Menu>
      <ContextDialogs ref={dialogsRef} />
    </>
  );
};

export default NodeContextMenu;
